<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '详情',
  },
}
</route>
<template>
  <view class="group-setting">
    <!-- 顶部导航栏 -->
    <wd-navbar
      title="讨论组设置"
      left-arrow
      placeholder
      @click-left="goBack"
      custom-style="background: #fff; border-bottom: none;"
      fixed
      safeAreaInsetTop
    ></wd-navbar>

    <!-- 群组基本信息 -->
    <view class="group-info pl-53rpx pr-30rpx py-60rpx mb-3">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <image class="group-avatar" :src="groupInfo.headImage" mode="aspectFill" />
          <view class="ml-18rpx">
            <view class="group-name">{{ groupInfo.name }}</view>
            <view class="group-id">群号：{{ groupInfo.groupId }}</view>
          </view>
        </view>
        <wd-icon name="qrcode" size="86rpx" color="#3670F7" @click="handleCode" />
      </view>
    </view>

    <!-- 成员列表 -->
    <view
      class="members bg-white mt-0 mb-24rpx ml-24rpx mr-24rpx pt-31rpx pl-35rpx pb-60rpx pr-40rpx border-rd-[10px_10px_10px_10px]"
    >
      <view class="flex justify-between items-center mb-24rpx">
        <text class="section-title">组成员</text>
        <text class="member-count">{{ groupInfo.memberCount }}人</text>
      </view>

      <view class="member-grid">
        <view v-for="member in groupInfo.memberList" :key="member.id" class="member-item">
          <wd-img
            class="member-avatar w-92rpx h-92rpx"
            :src="member.headImage ? member.headImage : 'null'"
          >
            <template #error>
              <view class="error-wrap">{{ member.showNickName }}</view>
            </template>
          </wd-img>
          <view class="member-name">{{ member.showNickName }}</view>
          <view
            class="member-role"
            v-if="
              userStore.userInfo.roleList.includes('teacher') &&
              member.userId === userStore.userInfo.userId
            "
          >
            老师
          </view>
        </view>
        <view class="member-action" @click="handleAddMember">
          <image class="action-icon" src="/static/images/course/add-user.png" mode="scaleToFill" />
          <text class="action-text">邀请</text>
        </view>
        <view class="member-action" @click="handleRemoveMember">
          <image
            class="action-icon"
            src="/static/images/course/remove-user.png"
            mode="scaleToFill"
          />
          <text class="action-text">移除</text>
        </view>
      </view>
    </view>

    <!-- 群组设置 -->
    <view class="bg-white mt-0 mb-24rpx ml-24rpx mr-24rpx border-rd-[10px_10px_10px_10px]">
      <wd-cell-group>
        <wd-cell
          title="群名称"
          :value="groupInfo.name"
          is-link
          @click="handleEditName"
          title-width="120rpx"
        />
        <wd-cell title="我的群身份" :value="myNickname" />
      </wd-cell-group>
    </view>
    <view class="bg-white mt-0 mb-83rpx ml-24rpx mr-24rpx border-rd-[10px_10px_10px_10px]">
      <wd-cell-group>
        <wd-cell title="组主题" vertical :label="groupInfo.groupTopic" @click="handleEditTheme" />
      </wd-cell-group>
    </view>

    <!-- 解散群聊 -->
    <view class="px-68rpx">
      <wd-button block size="large" @click="handleDismissGroup" custom-class="dismiss-group">
        解散群聊
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { deleteGroupInfo, findGroupInfo, membersGroupInfo } from '@/service/edu/group'
import { useGroupStore, useUserStore } from '@/store'
import { ref } from 'vue'
const userStore = useUserStore()

const groupInfo = ref({
  courseId: '',
  groupId: '',
  name: '',
  showGroupName: '',
  headImageThumb: '/static/group-avatar.png',
  headImage: '',
  memberCount: 0,
  memberList: [], // 成员列表
  groupTopic: '',
})

onLoad(() => {})
onShow(() => {
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const query = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
  if (query) {
    groupInfo.value.groupId = query.groupId
    handleGetInfo(query.groupId)
  }
})
const handleGetInfo = (groupId) => {
  findGroupInfo(groupId).then((group) => {
    if (group.code === 200) {
      groupInfo.value.name = group?.data?.name
      groupInfo.value.showGroupName = group?.data?.showGroupName
      groupInfo.value.headImageThumb = group?.data?.headImageThumb
      groupInfo.value.headImage = group?.data?.headImage || group?.data?.headImageThumb
      groupInfo.value.groupTopic = group?.data?.groupTopic
      groupInfo.value.courseId = group?.data?.courseId
      handleMemberInfo(groupId)
    }
  })
}
const handleMemberInfo = (groupId) => {
  membersGroupInfo(groupId).then((group) => {
    if (group.code === 200) {
      groupInfo.value.memberList = group.data
      groupInfo.value.memberCount = group.data.length
    }
  })
}

const myNickname = ref('教师')

const goBack = () => {
  uni.navigateBack()
}

const handleAddMember = () => {
  uni.navigateTo({
    url: `/pages/group/member-select?groupId=${groupInfo.value.groupId}&courseId=${groupInfo.value.courseId}&create=2`,
  })
}

const handleRemoveMember = () => {
  uni.navigateTo({
    url: `/pages/group/member-remove?groupId=${groupInfo.value.groupId}&create=2`,
  })
}
const handleCode = () => {
  uni.navigateTo({
    url: `/pages/group/qrcode?groupId=${groupInfo.value.groupId}`,
  })
}
const handleEditName = () => {
  // 编辑群名称
  uni.navigateTo({
    url: `/pages/group/change-name?groupId=${groupInfo.value.groupId}`,
  })
}

const handleEditTheme = () => {
  // 编辑组主题
}
const groupStore = useGroupStore()
const handleDismissGroup = () => {
  uni.showModal({
    title: '解散群聊',
    content: '是否确认解散该群聊？解散后无法恢复',
    confirmText: '确认解散',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
        // 调用解散群聊API
        deleteGroupInfo(groupInfo.value.groupId).then((data) => {
          if (data.code === 200) {
            uni.showToast({
              title: '解散群聊成功',
              icon: 'success',
            })
            groupStore.loadGroup()
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index',
              })
            }, 500)
          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}
</script>

<style lang="scss">
.group-setting {
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #f5f5f5;
}
.error-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 26rpx;
  line-height: 92rpx;
  color: #f6f9fe;
  text-align: center;
  background: #3670f7;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
}

.group-info {
  .group-avatar {
    width: 96rpx;
    height: 96rpx;
    background: #d8d8d8;
    border: 1rpx solid #d8d8d8;
    border-radius: 16rpx;
  }

  .group-name {
    margin-top: 4rpx;
    margin-bottom: 4rpx;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 47rpx;
    color: #3d3d3d;
  }

  .group-id {
    font-size: 26rpx;
    line-height: 38rpx;
    color: #767676;
  }
}

.section-title {
  font-size: 30rpx;
  font-weight: bolder;
  color: #3d3d3d;
}

.member-count {
  font-size: 26rpx;
  color: #999;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24rpx;
}

.member-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .member-avatar {
    margin-bottom: 12rpx;
  }

  .member-name {
    width: 100%;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 34rpx;
    color: #767c89;
    text-align: center;
    @apply truncate;
  }

  .member-role {
    position: absolute;
    bottom: 42rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 31rpx;
    margin-top: 4rpx;
    font-size: 18rpx;
    font-weight: 500;
    color: #50749a;
    letter-spacing: 0px;
    background: #e5f3ff;
    border-radius: 15.5rpx;
  }
}

.member-action {
  display: flex;
  flex-direction: column;
  align-items: center;

  .action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92rpx;
    height: 92rpx;
    margin-bottom: 12rpx;
    font-size: 44rpx;
    color: #999;
    border-radius: 12rpx;
  }

  .action-text {
    font-size: 24rpx;
    color: #767c89;
  }
}
/* #ifdef H5 */
:deep(.wd-navbar) {
  padding-top: 0;
}
/* #endif */
/* #ifdef MP */
:deep(.wd-navbar) {
  padding-top: var(--status-bar-height);
}
/* #endif */
.dismiss-group {
  height: 88rpx !important;
  font-weight: bold !important;
  color: #ff5047 !important;
  background: #ffffff !important;
  border-radius: 20rpx !important;
}
:deep(.wd-cell__title) {
  font-size: 30rpx !important;
  font-weight: bold !important;
  color: #3d3d3d !important;
}
</style>
